CSS的z-index－決定元素的堆疊順序

2020年4月26日 — 其中方位是可以設定負值的，例如: right: -20px; 、 bottom: -20px;. MDN ...

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are ...

2022年2月4日 — 超過最小值以最小值算，超過最大值以最大值算，例如「2147483647」與「2147483648」會被視為一樣大，這時候順序會由HTML 的順序或父層順序等決定。

如下圖範例1中所示，如果將色塊設成z-index: 1的話，就會將文字擋住了。

2023年9月26日 — The z-index CSS property sets the z-order of a positioned element and its descendants or flex and grid items. Overlapping elements with a ...

2013年1月23日 — z-index only applies to elements that have been given an explicit position. Add position:relative to #popupContent and you should be good to go.

所以該做的作法，就是在hover後，才把position改成absolute，然後指定個比較大的z-index讓他在上面。

1、判斷被覆蓋的層（想要置頂的層）的position是否也為relative或者absolute 2、如果1成立，則判斷是否此層的z-index比誤覆蓋的層的z-index數值大 3、如果2成立，判斷 ...

原本的就長原本的，意思是 static 就長 static 自己的，而不受 absolute 影響靜態定位(static)是網頁預設的定位方式。

2020年2月9日 — 當使用者面對螢幕時，元素的 z-index 屬性設定的數值愈大，則該元素就會愈靠近使用者。